<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        .wrapper .content{
            width: 350px;
            margin-left: 40px;
        }
        .wrapper .content ul li{
            /* width: 600px; */
            list-style: none;
            border-bottom: 1px dashed black;
            display: none;

        }
        .wrapper .content ul li a{
            float: right;
        }
        
    </style>
    <script src="../js/jquery.js"></script>
    <script>
        $(function(){
            // 添加事件
            $(".wrapper").on("click",".section button",function(){
                var value =$("textarea").val();
                // var index=$(this).index();
                // console.log(index);
                if(value.length == 0){
                    return;
                }

                $(".wrapper .content ul").append("<li>"+value+"<a href='#''>删除</a></li>")
                $(".wrapper .content ul li").slideDown()

                $("textarea").val("")
            })
            // 删除事件
            $(".wrapper .content ul").on("click","li a",function(){
                var index=$(this).index()
                // console.log(index);
                $(this).parents("li").slideUp(function(){
                    $(this).parents("li").remove()
                })
                
                ;
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="section">
            <span>微博发布</span>
            <textarea cols="40" rows="10"></textarea>
            <button>发布</button>
        </div>
        <div class="content">
            <ul>
                <!-- <li>13232 <a href="#">删除</a></li>
                <li>13232 <a href="#">删除</a></li> -->
            </ul>
        </div>

    </div>
</body>
</html>